<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞行文本动画效果</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <p class="text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit suscipit iure explicabo delectus laborum
      architecto, dolorem ratione beatae vero! Sit nobis commodi beatae nemo accusamus eaque repellendus ipsam non
      molestias.
    </p>
  </section>
</body>
<script src="./anime.min.js"></script>
<script>
  const texts = document.querySelector('.text')
  texts.innerHTML = texts.textContent.replace(/\S/g, "<span>$&</span>")

  const animation = anime.timeline({
    targets: '.text span',
    easing: 'easeInOutExpo',
    loop: true
  })

  animation.add({
    rotate: function() {
      return anime.random(-360, 360)
    },
    translateX: function() {
      return anime.random(-500, 500)
    },
    translateY: function() {
      return anime.random(-500, 500)
    },
    duration: 5000,
    delay: anime.stagger(20)
  })
    .add({
      rotate: 0,
      translateX: 0,
      translateY: 0,
      duration: 5000,
      delay: anime.stagger(20)
    })
</script>

</html>